<template>
  <div>
    <el-card>
      <div slot="header">
        <span>月度信息统计</span>
        <el-date-picker
          v-model="date"
          type="month"
          placeholder="选择月"
          value-format="yyyy-MM-dd"
          @change="change">
        </el-date-picker>
      </div>
      <el-row>
        <el-col :span="12">
          <monthly-working-histogram
            :year="year"
            :month="month"
            :reLoad="reLoad">
          </monthly-working-histogram>
        </el-col>
        <el-col :span="12">
          <monthly-working-ring-chart
            :year="year"
            :month="month"
            :reLoad="reLoad">
          </monthly-working-ring-chart>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import MonthlyWorkingHistogram from '@/views/Statistic/MonthlyWorkingHistogram'
import MonthlyWorkingRingChart from '@/views/Statistic/MonthlyWorkingRingChart'

export default {
  name: 'staristic-month-card',
  components: {
    MonthlyWorkingHistogram,
    MonthlyWorkingRingChart
  },
  data () {
    return {
      date: '',
      reLoad: true
    }
  },
  computed: {
    month: function () {
      return this.date.substr(5, 2)
    },
    year: function () {
      return this.date.substr(0, 4)
    }
  },
  created () {
    let myDate = new Date()
    this.date = myDate.getFullYear() + '-' + (myDate.getMonth() + 1)
  },
  methods: {
    change () {
      this.reLoad = !this.reLoad
    }
  }
}
</script>
<style>
</style>
